<template>
  <el-dialog v-model="dialogVisible" title="文章详情" width="50%">
    <main class="article">
      <div class="article-title">
        <h4 class="article-title-tip">标题：</h4>
        <div class="article-title-text">{{ articleData.title }}</div>
      </div>

      <!-- 作者 -->
      <div class="article-author">
        <h4>作者：</h4>
        <div class="article-author-info">
          <el-avatar :src="articleData.avatar" :size="40"></el-avatar>
          <div class="article-author-info-name">{{ articleData.userName }}</div>
        </div>
      </div>

      <!-- 标签 -->
      <div class="article-tag">
        <h4>标签：</h4>
        <el-tag type="success" v-for="(item, index) in articleData.tag" :key="index">{{ item }}</el-tag>
      </div>

      <!-- 图片 -->
      <div class="article-images">
        <!-- <h4>图片：</h4> -->
        <el-carousel height="150px" style="width: 350px" trigger="click" :autoplay="false">
          <el-carousel-item v-for="(image, index) in articleData.images" :key="index">
            <el-image :style="{ width: `${100}%`, height: `${100}%` }" :src="image" fit="cover" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 内容 -->
      <div class="article-content">
        <h4>内容：</h4>
        <p class="article-content-text">{{ articleData.content }}</p>
      </div>
    </main>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineProps, defineExpose, onMounted } from "vue"

const props = defineProps({
  articleData: {
    type: String,
    required: true,
  },
})

let dialogVisible = ref(false)
const gridData = reactive([
  {
    date: "2016-05-02",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-04",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-01",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
])

onMounted(() => {})

defineExpose({
  dialogVisible,
})
</script>

<style lang="scss" scoped>
.article {
  width: 100%;
  max-height: 400px;
  overflow: auto;
  padding-right: 15px;

  &::-webkit-scrollbar {
    width: 7px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background-color: #b2b2b2; /*修改滑块颜色*/
  }

  &-title,
  &-author,
  &-tag,
  &-content {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    > h4 {
      width: 7%;
    }

    &-text {
      flex: 1;
    }

    ::v-deep .el-tag {
      margin-right: 10px;
    }
  }

  &-content {
    align-items: flex-start;
  }
  &-images {
    margin: 20px 0;
  }

  &-author-info {
    display: flex;
    align-items: center;
    &-name {
      margin-left: 10px;
      color: #606266;
      font-weight: bold;
    }
  }
}
</style>
